<script setup>
import HeaderComponent from "@/components/index/HeaderComponent.vue";
import LeftMenuComponent from "@/components/index/LeftMenuComponent.vue";
import {ref} from "vue";
import {useRoute} from "vue-router";

const hideMenu = ref(false)
const route = useRoute()
</script>
<template>
  <div v-if="route.name !== 'login'">
    <header-component :open_btn="hideMenu" @menuHideShow="hideMenu=!hideMenu"/>
    <left-menu-Component :is-collapse="!hideMenu"/>
    <div class="content-scrollbar" :class="hideMenu?'vea-content-left':''">
      <el-scrollbar>
        <router-view/>
      </el-scrollbar>
    </div>
  </div>
  <router-view v-else/>

</template>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content-scrollbar {
  position: absolute;
  left: 220px;
  right: 15px;
  top: 45px;
  bottom: 0;
  box-sizing: border-box;
  padding: 15px 0 0 15px;

  &.vea-content-left {
    left: 65px;
  }
}

.search {
  margin-bottom: 15px;
}

.edit-btn {
  width: 85px;
}

.table-data{
  .el-table__header th{
    background: rgba(0, 149, 255, 0.45) !important;
    color: #ffffff;
    text-align: center;
  }
}

.form-data{
  margin-right: 15px;
}

.breadcrumb{
  margin-bottom: 15px;
}
</style>
